<template>
  <div class="app-container">
    <div class="hor mg-b-10">
      <div class="match-width">
        <table class="cus-table match-width" border="1px">
          <tr>
            <th style="">清单归属</th>
            <td class="pd-lr50" style="text-align: left">{{ this.projectInfo.name }}
            </td>
          </tr>
          <tr>
            <th style="">上传清单类型</th>
            <td class="hor ver-center pd-lr20" @change="fetchData">
              <div class="pd-lr25" v-if="choiceBidType == 1">
                <el-radio v-model="choiceBidType" :label=1>标底</el-radio>
              </div>
              <div class="pd-lr25" v-if="choiceBidType == 2">
                <el-radio v-model="choiceBidType" :label=2>实施标底</el-radio>
              </div>
            </td>
          </tr>
          <tr>
            <th style="">选择文件</th>
            <td>
              <el-upload
                class="pd-lr50" style="text-align: left"
                action="#"
                slot="reference"
                :auto-upload="false"
                :on-change="importOuterBidBase"
                :multiple="false"
                :show-file-list="false">
                <el-tooltip class="" effect="light" content="若已上传，再次上传会清除原来上传的内容" placement="right-start">
                <el-link type="primary" icon="el-icon-upload2" size="mini"
                         loading="onSaveLoading" >上传
                </el-link>
                </el-tooltip>
              </el-upload>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div v-if="this.allList.length > 0">
      <div class="hor pd-tb5 ver-center">
        <div class="pd-tb5 tip hor">注意：标红内容与全系清单不一致</div>
        <div class="flex1"></div>
        <el-button type="primary" size="mini"  class=" hor"
                   :loading="onSaveLoading"
                   @click="autoCorrectOuterBidBaseTabulation(allList)">自动修正内容并保存
        </el-button>
      </div>
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="allList"
        element-loading-text="Loading"
        :max-height="autoHeight"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="分类" align="center" width="100">
          <template slot-scope="scope">
            {{ scope.row.fenLeiName }}
          </template>
        </el-table-column>
        <el-table-column label="名称" align="center" width="">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="分析分类" align="center" width="">
          <template slot-scope="scope">
            <el-select class="font-text-color-main-title" style="width: 120px"
                       v-model="scope.row.fenXiFenLei" clearable placeholder="请选择"
                       @change="onInputChange(scope.row)">
              <el-option
                label="变压器"
                value="变压器">
              </el-option>
              <el-option
                label="低压柜"
                value="低压柜">
              </el-option>
              <el-option
                label="调试"
                value="调试">
              </el-option>
              <el-option
                label="高压电缆"
                value="高压电缆">
              </el-option>
              <el-option
                label="高压柜"
                value="高压柜">
              </el-option>
              <el-option
                label="其他"
                value="其他">
              </el-option>
              <el-option
                label="手续费"
                value="手续费">
              </el-option>
              <el-option
                label="低压电缆"
                value="低压电缆">
              </el-option>
              <el-option
                label="配电箱"
                value="配电箱">
              </el-option>
              <el-option
                label="电表"
                value="电表">
              </el-option>
              <el-option
                label="电表箱"
                value="电表箱">
              </el-option>
              <el-option
                label="母线槽"
                value="母线槽">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="型号" width="100" align="center">
          <template slot-scope="scope">
          <div class="text-center"
               :class="{'bg-red':scope.row.modelCodeError==1,'font-color-white':scope.row.modelCodeError==1,'font-black':scope.row.modelCodeError!=1}">
            {{ scope.row.modelCode }}
          </div>
          </template>
        </el-table-column>
        <el-table-column label="工作内容" width="500" align="">
          <template slot-scope="scope">
            <div class="text-center"
                 :class="{'bg-red':scope.row.neiRongError==1,'font-color-white':scope.row.neiRongError==1,'font-black':scope.row.neiRongError!=1}">
              {{ scope.row.gongZuoNeiRong }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="单位" width="60" align="center">
          <template slot-scope="scope">
            {{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column label="工程量" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.gongChengLiang }}
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>

</template>

<script>
import {getCityData} from "@/js/cityData";

const requestOuterBidBaseTabulation = require('@/api/tabulation/outerBidBaseTabulation')
const request = require('@/api/project/biddingCompany')
export default {
  props: {
    choiceBidType: null,
    projectInfo:{}
  },
  watch: {
    choiceBidType: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.fetchData(); // 执行查询方法
        }
      }
    },
  },
  data() {
    return {
      allList: [],
      itemInfo: [],
      page: 1,
      size: 20,
      total: 0,
      autoHeight: 600,//根据屏幕高度自动计算的高度
      //筛选参数
      params: {
        flag: 1,
      },
      listLoading: false,
      onSaveLoading: false,
      areaData: [],
    }
  },
  beforeMount() {
    this.autoHeight = document.body.scrollHeight - 220
    this.itemInfo = JSON.parse(this.$route.query.itemInfo)
  },
  mounted() {
    this.fetchData()
    this.areaData = getCityData()
    //去掉第三级的信息
    for (let i = 0; i < this.areaData.length; i++) {
      if (this.areaData[i].children != null && this.areaData[i].children.length > 0) {
        for (let j = 0; j < this.areaData[i].children.length; j++) {
          this.areaData[i].children[j].children = null
        }
      }
    }
  },
  methods: {
    formatDate(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    fetchData() {
      this.listLoading = true
      const data = new FormData()
      for (var key in this.params) {//直接去除掉空值的对象
        if (this.isEmpty(this.params[key])) {
          delete this.params[key]
        }
      }
      this.params["project.id"] = this.projectInfo.id
      this.params["bidType"] = this.choiceBidType
      data.append('params', JSON.stringify(this.params))
      data.append('page', 1)
      data.append('size', 999999)
      const sortList = []
      sortList.push(
        {
          direction: 'desc',
          property: 'createTime'
        }
      )
      data.append('sortJsonStr', JSON.stringify(sortList))
      requestOuterBidBaseTabulation.getList(data).then(response => {
        this.allList = response.data
        this.total = response.totalElements
        this.listLoading = false
      })
      this.listLoading = false
    },
    autoCorrectOuterBidBaseTabulation(allList) {
      this.onSaveLoading = true
      let outerTabulationList = allList
      requestOuterBidBaseTabulation.saveAutoCorrect(outerTabulationList).then(response => {
        this.onSaveLoading = false
        this.$message({
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
        this.fetchData()
      }).catch((e) => {
        this.onSaveLoading = false
      })
    },
    importOuterBidBase(file) {
      if (this.choiceBidType == null || this.choiceBidType == "" || this.choiceBidType == undefined) {
        this.$message({
          message: '未明确选择上传标底清单类型，请稍后重试',
          type: 'warning',
          duration: 2000
        })
        return
      }
      this.onSaveLoading = true;
      this.$message({
        message: '上传中，分析时间可能比较久，请耐心等待',
        type: 'warning'
      })
      const data = new FormData();
      data.append('file', file.raw);
      data.append('projectId', this.projectInfo.id);
      data.append('bidType', this.choiceBidType);
      requestOuterBidBaseTabulation.importBd(data, function (percent) {
        console.log(percent)
      }).then(response => {
        this.onSaveLoading = false;
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.onSaveLoading = false;
        this.fetchData()
      }).catch((e) => {
        this.onSaveLoading = false;
      })
    },
    onInputChange(row){
      this.onSaveLoading = true
      //把选择的权限赋值过去
      const data = new FormData()
      data.append('json', JSON.stringify(row));
      requestOuterBidBaseTabulation.modifyFenXiFenLei(data).then(response => {
        this.onSaveLoading = false
        this.$message({
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
        this.fetchData()
      }).catch((e) => {
        this.onSaveLoading = false
      })
    },

  }
}
</script>

<style scoped>
.cus-table {
  border-collapse: collapse;
  text-align: center;
}

.cus-table td, .cus-table th {
  border: 1px solid #cad9ea;
  color: #424242;
  height: 50px;
}

.cus-table th {
  background-color: #EFEFEF;
  width: 100px;
  color: #414141;
  font-size: 14px;
}
.tip {
  color: red;
  padding-top: 1rem;
}
</style>
